import VueRouter from "vue-router";
import Friend from "../pages/Friend";
import My from "../pages/My";
import Cart from "../pages/Cart";
import Vue from "vue";

//配置路由步骤：
//1、定义视图组件
//2、定义routes
//3、展示页面router-view

//将路由注入到所有的子节点
Vue.use(VueRouter);

//定义路由配置
//路由配置是一个数组，数组中是一个一个的对象，每个对象通过一个path对应一个component

//路由懒加载：通过import()语法，单独切割出一个包，有需要的时候才加载
//好处：加快首页渲染速度，提高用户体验
//原理：使用了webpack的代码切割功能，当webpack识别到import这样的语法的时候，会自动分割出一个包
//不合法路由：只要用户访问的路径不在routes配置列表里面都属于不合法路由，我们需要给用户展示404页面
//命名路由的好处 可以直接通过name属性来进行跳转,就不用考虑多级路由路径长的问题
const routes = [
  {
    path: "/friend",
    component: Friend,
  },
  // 匹配优先级：同一个路径可以匹配多个组件，按照编写顺序，谁先编写就匹配谁，写项目的时候应该避免同一个路径匹配多个路由
  // {
  //   path: "/friend",
  //   component: My,
  // },
  {
    path: "/my",
    component: My,
  },
  {
    path: "/discover",
    redirect: "/discover/playlist",
    component: () =>
      import(/*webpackChunkName:"discover" */ "../pages/Discover"),
    //嵌套路由直接用children，格式和routes一样
    //但是嵌套路由的路径不能加"/"
    children: [
      {
        name: "playlist", //命名路由
        path: "playlist",
        component: () =>
          import(/*webpackChunkName:"playlist" */ "../pages/Discover/Playlist"),
      },
      {
        path: "toplist",
        component: () =>
          import(/*webpackChunkName:"toplist" */ "../pages/Discover/Toplist"),
      },
      {
        path: "djradio",
        component: () =>
          import(/*webpackChunkName:"djradio" */ "../pages/Discover/Djradio"),
      },
    ],
  },

  //动态路由参数，在路径后面通过：xx的方式来编写
  {
    path: "/detail/:id",
    props: true, //动态参数解耦合
    component: () => import(/*webpackChunkName:"detail" */ "../pages/Detail"),
  },
  {
    path: "/goods",
    component: () => import(/*webpackChunkName:"goods" */ "../pages/Goods"),
  },
  {
    path: "*", //捕获所有的路由
    component: () => import(/*webpackChunkName:"page404" */ "../pages/Page404"),
  },
  {
    path: "/Count",
    component: () => import(/*webpackChunkName:"count" */ "../pages/Count"),
  },
  {
    path: "/cart",
    component: () => import(/**webpackChunkName:"cart" */ "~/Cart"),
  },
  {
    path: "/login",
    component: () => import(/**webpackChunkName:"login" */ "~/Login"),
  },
];

//实例化路由
export default new VueRouter({
  mode: "history",
  routes,
});
